iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
1
自我挑戰組

Angular 學習雜記系列 第 9

Angular 學習雜記-Angular的服務(Service)元件(續)

  • 分享至 

  • xImage
  •  

在上一個篇章上,先修改了由資料類別,來建立員工資料。接下來,就是要建立服務(Service)元件。可以用Visual Studio Code的介面來建立,或是在Dos命令列,切換到要建立目錄中,再下指令來建立即可。在Visual Studio Code,在app目錄,按滑鼠的左鍵,就會出現子視窗,選取「Angular: Generate a service」。如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20190925/20000953K1ydfaBN6L.png

輸入服務(Service)元件的名稱,例如:「employeeservice」。按enter,到下一步,就用預設值即可。

https://ithelp.ithome.com.tw/upload/images/20190925/20000953qF89ji3Vl0.png

最後,就會出現執行的指令,按下「Confirm」就會自動產生。也可以將這個指令,在Dos命令列,直接下,也可以。

https://ithelp.ithome.com.tw/upload/images/20190925/200009535qndOamPmM.png

產生出來的程式碼,如下所示:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EmployeeserviceService {

  constructor() { }
}
要注意的是,程式會自動匯入Angular的Injectable的符號,並且增加@Injectable(),表示會提供一個可注入的服務。
接下來,import資料類別、及資料,再建立一個函式,回傳員工資料。以資料類別的陣列集合回傳即可。
import { Injectable } from '@angular/core';
// 引用資料類別
import { Employeeinfo } from './employeeinfo';
// 引用資料
import { employeelist } from './employeelist';

@Injectable({
  providedIn: 'root'
})
export class EmployeeserviceService {

  constructor() { }

  // 回傳員工資料
  getEmployee(): Employeeinfo[] {
    return employeelist;
  }
}
而要如何在其他的component,使用service。靜待下回分解。

上一篇
Angular 學習雜記-Angular的服務(Service)元件
下一篇
Angular 學習雜記-Angular的服務(Service)元件,要如何應用
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言